<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar title="收货地址管理" back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground">
			<text class="slot" slot="right" @tap="handleNavigateTo('./newAddress/newAddress')">新增地址</text>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title="收货地址管理" back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground">
			<view class="slot"><text @tap="handleNavigateTo('./newAddress/newAddress')">新增地址</text></view>
		</u-navbar>
		<!-- #endif -->
		<view class="main">
			<view class="list">
				<scroll-view scroll-y>
					<view class="item" v-for="item in resultList" :key="item.id">
						<view class="item-top">
							<text class="name">{{ item.name }}</text>
							<text class="phone">{{ item.mobile }}</text>
						</view>
						<view class="item-middle">
							<text>{{ item.address }}</text>
						</view>
						<view class="item-bottom">
							<view class="item-bottom-left" @click="handleSetDefault(item.id)">
								<u-icon size="35" :color="item.is_default ? '#3f6cb7' : '#999'" name="checkmark-circle-fill"></u-icon>
								<text>默认地址</text>
							</view>
							<view class="item-bottom-right">
								<view class="item-bottom-right-item" @tap="handleEdit(item)">
									<u-icon size="35" name="edit-pen"></u-icon>
									<text>编辑</text>
								</view>
								<view class="item-bottom-right-item" @tap="handleDelete(item.id)">
									<u-icon size="35" name="trash"></u-icon>
									<text>删除</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<u-popup v-model="showPopup" border-radius="10" mode="center">
			<view class="popup">
				<text class="popup-title">提示</text>
				<text class="popup-content">是否要删除该地址？</text>
				<view class="popup-bottom">
					<text @tap="showPopup = false">取消</text>
					<text class="confirm" @tap="handleConfirm">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			showPopup: false,
			resultList: [],
			id: ''
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	onShow() {
		this.onPageInit();
	},
	methods: {
		onPageInit() {
			this.$tkRequest('/api/Address/getList').then(res => {
				this.resultList = res.data;
			});
		},
		handleNavigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		handleEdit(item) {
			uni.navigateTo({
				url: `./editAddress/editAddress?ops=${JSON.stringify(item)}`
			});
		},
		handleDelete(id) {
			this.id = id;
			this.showPopup = true;
		},
		handleConfirm() {
			uni.showToast({
				title: '正在删除...'
			});
			this.$tkRequest('/api/Address/delete', {
				id: this.id
			}).then(res => {
				uni.hideLoading();
				uni.showToast({
					title: res.msg
				});
				this.onPageInit();
				this.showPopup = false;
			});
		},
		// 设置默认地址
		handleSetDefault(id) {
			this.$tkRequest('/api/Address/setDefault', {
				id: id
			}).then(res => {
				uni.showToast({
					title: '设置成功'
				});
				this.onPageInit();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.slot {
	padding: 0 $uni-spacing-row-lg;
	color: #f1f1f1;
	font-size: 11pt;
	/* #ifdef APP-PLUS */
	font-size: 14pt;
	/* #endif */
}

.popup {
	width: 70vw;
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
	display: flex;
	flex-direction: column;
	align-items: center;

	.popup-title {
		font-size: 12pt;
	}

	.popup-content {
		font-size: 1rem;
		padding: 40rpx 0;
	}

	.popup-bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: $uni-spacing-col-lg;
		font-size: 12pt;

		text {
			flex: 1;
			text-align: center;
		}

		.confirm {
			color: #3f6cb7;
		}
	}
}

.main {
	.list {
		scroll-view {
			max-height: 100vh;
		}

		.item {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			margin: $uni-spacing-col-lg 0;

			.item-top {
				font-size: 1rem;
			}

			.item-middle {
				padding: $uni-spacing-col-lg 0;
				font-size: 11pt;
				color: #999;
			}

			.item-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1rpx solid #eee;
				padding-top: $uni-spacing-col-lg;

				.item-bottom-left {
					display: flex;
					align-items: center;
					font-size: 11pt;

					text {
						padding-left: 15rpx;
					}
				}

				.item-bottom-right {
					display: flex;
					align-items: center;

					.item-bottom-right-item {
						display: flex;
						align-items: center;
						padding: 0 $uni-spacing-row-sm;

						text {
							padding-left: 15rpx;
						}
					}
				}
			}
		}
	}
}
</style>
